<html>
<!-- Head tag -->
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	
		<link href="/favicon.ico" rel="icon">
	 
      <title>Hexo+OSChina搭建免费个人博客 | BiJii&#39;s Blog</title>
	<link rel="stylesheet" href="/css/font-awesome/css/font-awesome.css">
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/highlight.css">
	
    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?542b4962c3c4035fce9071b7c665f0d2";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

	
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-97838175-1', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->


</head>
<body>
	<div id="site" class="site">
		<div id="sidebar" class="sidebar">
			<header id="header" class="site-header">
	<div class="site-branding">
		<h1 class="site-title"><a href="/" rel="home">BiJii&#39;s Blog</a></h1>
		<p class="site-description">认认真真...</p>
		<button class="secondary-toggle font-asesome-icon">Menu and widgets</button>
	</div>
</header>
<div id="secondary" class="secondary">
	<nav class="main-navigation">
                         <ul id="menu-demo-menu" class="nav-menu">
						 
							<li class="menu-item"><a href="/">首页</a></li>
						
							<li class="menu-item"><a href="/archives">归档</a></li>
						
							<li class="menu-item"><a href="/about">关于</a></li>
						
                         </ul>
    </nav>
	
		
<aside class="widget">
		<h3 class="widget-title">归档</h3>		
		<ul>
			<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a><span class="archive-list-count">1</span></li></ul>
		</ul>
	</aside>


	
		
<aside class="widget">
		<h3 class="widget-title">最新文章</h3>		
		<ul>
			
          <li>
            <a href="/2017/12/08/TeiidUseNote/">Teiid搭建和使用小记</a>
          </li>
        
          <li>
            <a href="/2017/11/16/HexoOSChina/">Hexo+OSChina搭建免费个人博客</a>
          </li>
        
          <li>
            <a href="/2017/06/12/DatatablesStruts/">Struts2+DataTables动态生成数据表</a>
          </li>
        
		</ul>
	</aside>


	
		
  <aside class="widget">
		<h3 class="widget-title">标签云</h3>
        <a href="/tags/Datatables/" style="font-size: 10px;">Datatables</a> <a href="/tags/Hexo/" style="font-size: 10px;">Hexo</a> <a href="/tags/Teiid/" style="font-size: 10px;">Teiid</a>
    </aside>

	
</div>
		</div>
		<div id="content" class="site-content">
			<main id="main" class="site-main" role="main">
				
<article class="hentry ">
		
		
			<header class="entry-header">
				<h2 class="entry-title"><a href="/2017/11/16/HexoOSChina/" rel="bookmark">Hexo+OSChina搭建免费个人博客</a></h2>	
			</header>
		
		<!-- .entry-header -->
		<div class="entry-content">
			
				<p>参考文档：<a href="https://my.oschina.net/z707z/blog/824830" target="_blank" rel="external">免费个人博客搭建教程（详细-图文）</a></p>
<h4 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h4><ol>
<li><p>Node.js安装</p>
<p> 参考：<a href="http://www.runoob.com/nodejs/nodejs-install-setup.html" target="_blank" rel="external">http://www.runoob.com/nodejs/nodejs-install-setup.html</a></p>
<p> 没有VPN的用户可通过在命令行窗口中执行以下代码切换npm的源：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm config set registry http://registry.npm.taobao.org        #切换npm为淘宝镜像</div></pre></td></tr></table></figure>
</li>
<li><p>Git安装</p>
<p> 参考：<a href="http://www.runoob.com/git/git-install-setup.html" target="_blank" rel="external">http://www.runoob.com/git/git-install-setup.html</a></p>
</li>
<li><p>Hexo安装</p>
<p> 在命令行窗口中执行：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -g hexo-cli         #安装Hexo</div></pre></td></tr></table></figure>
<p> 安装成功后可在命令窗口输入hexo，测试是否安装成功；</p>
<p> hexo常用命令说明：<a href="https://hexo.io/zh-cn/docs/commands.html" target="_blank" rel="external">https://hexo.io/zh-cn/docs/commands.html</a></p>
</li>
</ol>
<h4 id="本地运行Hexo"><a href="#本地运行Hexo" class="headerlink" title="本地运行Hexo"></a>本地运行Hexo</h4><p>使用<strong>Git Bash</strong>执行下列命令，<strong>folder</strong>就是我们要放文档的地方，注意每次使用的命令行操作的时候要切换到这个目录下面。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$ cd &lt;folder&gt;       #切换到项目目录下</div><div class="line">$ hexo init         #初始化，Hexo 默认在目前的文件夹建立网站</div><div class="line">$ npm install       #install before hexo generate</div><div class="line">$ hexo generate     #生成静态文件</div></pre></td></tr></table></figure></p>
<p>执行$ npm install时,出现以下警告：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">npm WARN optional Skipping failed optional dependency /browser-sync/chokidar/fsevents: </div><div class="line">npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.8</div></pre></td></tr></table></figure></p>
<p>参考：<a href="https://segmentfault.com/q/1010000004498934/a-1020000004498956" target="_blank" rel="external">进行npm install时出现警告信息</a></p>
<blockquote>
<p>fsevent是mac osx系统的，你是在win或者Linux下使用了 所以会有警告，忽略即可。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ cd &lt;folder&gt;         #切换到项目目录下</div><div class="line">$ npm install         #install before start blogging</div><div class="line">$ hexo server         #运行本地服务</div></pre></td></tr></table></figure>
<p>浏览器输入<a href="http://localhost:4000就可以看到效果。" target="_blank" rel="external">http://localhost:4000就可以看到效果。</a></p>
<p>如果输入后无法访问，可能是Hexo默认端口（4000）被占用，使用另外未被占有端口运行：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server -p 5000</div></pre></td></tr></table></figure>
<p>浏览器输入自然变成：<a href="http://localhost:5000。" target="_blank" rel="external">http://localhost:5000。</a></p>
<h4 id="修改Hexo的主题"><a href="#修改Hexo的主题" class="headerlink" title="修改Hexo的主题"></a>修改Hexo的主题</h4><ol>
<li>可以在官方收录的主题中去挑选：<a href="https://hexo.io/themes/" target="_blank" rel="external">Hexo主题</a>；</li>
<li>主题下载后，将主题文件解压到Hexo项目的themes文件夹下面；</li>
<li><p>修改Hexo的配置文件_config.yml，将里面theme 对应的值改为之前下载的主题的文件夹名字；</p>
<p> _config.yml配置文档：<a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="external">https://hexo.io/zh-cn/docs/configuration.html</a></p>
<p> 修改内容位置如下：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"># Extensions</div><div class="line">## Plugins: https://hexo.io/plugins/</div><div class="line">## Themes: https://hexo.io/themes/</div><div class="line">theme: hexo-theme-twentyfifteen-wordpress-master</div></pre></td></tr></table></figure>
<p> 注意：这里“: ”后面必须要有一个空格，而且这个空格要在英文输入法下，不然会报一些稀奇古怪的错。</p>
</li>
<li><p>执行以下代码，重新在本地启动项目：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$ cd &lt;folder&gt;       #切换到项目目录下</div><div class="line">$ npm install       #install before hexo generate</div><div class="line">$ hexo clean        #清除缓存文件 (db.json) 和已生成的静态文件 (public)</div><div class="line">$ hexo generate     #生成静态文件</div><div class="line">$ hexo server -p 5000       #运行本地服务</div></pre></td></tr></table></figure>
</li>
<li><p>主题中也有一个叫_config.yml配置文件，其中主要是些与主题相关的设置，一般里面也都有注释。</p>
</li>
</ol>
<h4 id="更新博客文章"><a href="#更新博客文章" class="headerlink" title="更新博客文章"></a>更新博客文章</h4><ol>
<li><p>使用MarkDown来写博客文章，可使用有道笔记或者马克飞象之类的编辑器，链接：<a href="https://maxiang.io/" target="_blank" rel="external">https://maxiang.io/</a>；</p>
</li>
<li><p>在编辑器里面写好文章后，复制或另存为.md文件, 与普通的.md文件不同，要在文件开头添加下面代码：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">title: #文章标题</div><div class="line">date: #文章日期</div><div class="line">tags: #文章标签</div><div class="line">categories: #文章分类</div><div class="line">---</div></pre></td></tr></table></figure>
</li>
<li><p>将写好的.md文件放入Hexo项目的source目录下的_posts文件夹中；</p>
</li>
<li><p>执行以下代码，重新在本地启动项目：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">$ cd &lt;folder&gt;       #切换到项目目录下</div><div class="line">$ npm install       #install before hexo generate</div><div class="line">$ hexo clean        #清除缓存文件 (db.json) 和已生成的静态文件 (public)</div><div class="line">$ hexo generate     #生成静态文件</div><div class="line">$ hexo server -p 5000       #运行本地服务</div></pre></td></tr></table></figure>
</li>
<li><p>浏览器输入<a href="http://localhost:5000就可以看到效果。" target="_blank" rel="external">http://localhost:5000就可以看到效果。</a></p>
<p> 遇到问题：</p>
<ol>
<li><p><a href="https://segmentfault.com/q/1010000000618915" target="_blank" rel="external">https://segmentfault.com/q/1010000000618915</a></p>
<p> <strong>问题描述：</strong></p>
<p> 我在_config.yml 中设置的菜单有Home,Archive,Category,About，</p>
<p> 可是只有Home和Archive点进去才有内容，Category和About都错Can’t found，还需要其他哪里设置才能生效么？</p>
<p> <strong>解决方式：</strong></p>
<p> 在命令行里面输入：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo new page &quot;about&quot;</div></pre></td></tr></table></figure>
<p> 然后你会发现source里面多了个目录about，里面有个index.md文件。其实你也可以手动建立。页面的格式和文章一样。</p>
<p> 接着把链接加上，themes/<theme_name>/_config.yml里面的menu一项，添加一行About: /about。</theme_name></p>
<p> 完事。</p>
<p> 参考：<a href="https://www.zhihu.com/question/33324071" target="_blank" rel="external">https://www.zhihu.com/question/33324071</a></p>
</li>
<li><p>页面国际化：<a href="https://hexo.io/zh-cn/docs/internationalization.html" target="_blank" rel="external">https://hexo.io/zh-cn/docs/internationalization.html</a></p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"># Site</div><div class="line">title: Hexo</div><div class="line">subtitle:</div><div class="line">description:</div><div class="line">author: John Doe</div><div class="line">language: zh-CN     #设置themes下对应语言文件名，如themes\landscape\languages\zh-CN.yml</div><div class="line">timezone:</div></pre></td></tr></table></figure>
</li>
</ol>
</li>
</ol>
<h4 id="发布静态Html文件到码云Pages上"><a href="#发布静态Html文件到码云Pages上" class="headerlink" title="发布静态Html文件到码云Pages上"></a>发布静态Html文件到码云Pages上</h4><p>参考文档：<a href="http://git.mydoc.io/?t=154714" target="_blank" rel="external">http://git.mydoc.io/?t=154714</a></p>
<ol>
<li><p>注册一个码云帐号，并创建一个项目;</p>
</li>
<li><p>创建完项目后得到项目的Https的地址后面要用；</p>
<blockquote>
<p>这里借用一个插件来帮助我们完成代码上传的工作，安装 hexo-deployer-git。安装代码如下：</p>
<blockquote>
<p>npm install hexo-deployer-git –save        #把public里面生成的文件推上到码云上。</p>
</blockquote>
</blockquote>
</li>
<li><p>配置项目根目录_config.yml文件，修改deploy的值；</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"># Deployment</div><div class="line">## Docs: https://hexo.io/docs/deployment.html</div><div class="line">deploy:</div><div class="line">  type: git</div><div class="line">  repository: https://&#123;用户名&#125;:&#123;密码&#125;@git.oschina.net/&#123;用户名&#125;/&#123;用户名&#125;.git</div><div class="line">  branch: master</div></pre></td></tr></table></figure>
</li>
<li><p>修改完后在命令窗口执行下面命令：</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">cd &lt;folder&gt;         #切换到项目目录下</div><div class="line">hexo deploy         #一键部署功能</div></pre></td></tr></table></figure>
</li>
<li><p>登录码云，查看之前创建的项目中出现了本地项目中public文件夹中的文件，部署成功；</p>
</li>
<li><p>打开项目的Pages页，启动码云的pages服务，访问链接为启用时显示的网站地址;</p>
<blockquote>
<p>如果你想以根目录的形式访问自己的静态网站，只需要建立一个与自己个性地址同名的项目即可，如 <a href="http://git.oschina.net/ipvb" target="_blank" rel="external">http://git.oschina.net/ipvb</a> 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.oschina.io直接访问，那么他就可以创建一个名字为ipvb的项目 <a href="http://git.oschina.net/ipvb/ipvb" target="_blank" rel="external">http://git.oschina.net/ipvb/ipvb</a> 部署完成后，就可以以 <a href="http://ipvb.oschina.io" target="_blank" rel="external">http://ipvb.oschina.io</a> 进行访问了。</p>
</blockquote>
</li>
</ol>

			
		</div><!-- .entry-content -->
		
			<div class="entry-comments">
				 
  
   
      <!-- ��˵���ۿ� start -->
	<div class="ds-thread" data-thread-key="2017/11/16/HexoOSChina/" data-title="Hexo+OSChina搭建免费个人博客" data-url="http://vfface.oschina.io/2017/11/16/HexoOSChina/"></div>
<!-- ��˵���ۿ� end -->
<!-- ��˵����JS���� start (һ����ҳֻ������һ��) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"troyyang"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.unstable.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- ��˵����JS���� end -->
 
			</div>
		
		<footer class="entry-footer">
			<span class="posted-on font-asesome-icon">
	<a href="" rel="bookmark">
	<time class="updated" datetime="2017-11-15T16:00:00.000Z">2017-11-16</time>
	</a>
</span>

	<span class="cat-links font-asesome-icon">
		
				<a href="/categories/博客/" rel="category tag">博客</a>
		
	</span>


	<span class="tags-links font-asesome-icon">
	
		<a href="/tags/Hexo/" rel="category tag">Hexo</a>
    
</span>
		

    <span class="eye font-asesome-icon" >
         <span id="/2017/11/16/HexoOSChina/" class="leancloud_visitors" data-flag-title="Hexo+OSChina搭建免费个人博客">
        
        </span>
    </span>

		</footer><!-- .entry-footer -->
</article>
<div class="misc">
    <a href="#main"><span class="top font-asesome-icon">Top</span></a>
</div>
			</main>
		</div>
		<footer id="colophon" class="site-footer">
			<div class="site-info">
				<span>powered by <a href="https://hexo.io/">Hexo</a>&nbsp;&nbsp; theme by <a href="https://github.com/Troy-Yang/hexo-theme-twentyfifteen-wordpress">Troy</a> &nbsp; inspired by <a href="https://wordpress.org/themes/">wordpress</a></span>
			</div><!-- .site-info -->
		</footer>
	</div>
    <!-- After footer scripts -->
    <script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/main.js"></script>

    <!--referring from https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html -->
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
    <script>
        AV.initialize("wzqncxgqp9MCPiPERe3gnX2Q-gzGzoHsz", "CCtBiqyPtJWupuozt1393AXm");
    </script>
    <script>
        function showTime(Counter) {
            var query = new AV.Query(Counter);
            $(".leancloud_visitors").each(function () {
                var url = $(this).attr("id").trim();
                query.equalTo("url", url);
                query.find({
                    success: function (results) {
                        if (results.length == 0) {
                            var content = $(document.getElementById(url)).text() + ': 0';
                            $(document.getElementById(url)).text(content);
                            return;
                        }
                        for (var i = 0; i < results.length; i++) {
                            var object = results[i];
                            var content = $(document.getElementById(url)).text() + ': ' + object.get('time');
                            $(document.getElementById(url)).text(content);
                        }
                    },
                    error: function (object, error) {
                        console.log("Error: " + error.code + " " + error.message);
                    }
                });
            });
        }
        function addCount(Counter) {
            var Counter = AV.Object.extend("Counter");
            url = $(".leancloud_visitors").attr('id').trim();
            title = $(".leancloud_visitors").attr('data-flag-title').trim();
            var query = new AV.Query(Counter);
            query.equalTo("url", url);
            query.find({
                success: function (results) {
                    if (results.length > 0) {
                        var counter = results[0];
                        counter.fetchWhenSave(true);
                        counter.increment("time");
                        counter.save(null, {
                            success: function (counter) {
                                var content = $(document.getElementById(url)).text() + ': ' + counter.get('time');
                                // remove ': '
                                $(document.getElementById(url)).text(counter.get('time'));
                            },
                            error: function (counter, error) {
                                console.log('Failed to save Visitor num, with error message: ' + error.message);
                            }
                        });
                    } else {
                        var newcounter = new Counter();
                        newcounter.set("title", title);
                        newcounter.set("url", url);
                        newcounter.set("time", 1);
                        newcounter.save(null, {
                            success: function (newcounter) {
                                console.log("newcounter.get('time')=" + newcounter.get('time'));
                                var content = $(document.getElementById(url)).text() + ': ' + newcounter.get('time');
                                // remove ': '
                                $(document.getElementById(url)).text(newcounter.get('time'));
                            },
                            error: function (newcounter, error) {
                                console.log('Failed to create');
                            }
                        });
                    }
                },
                error: function (error) {
                    console.log('Error:' + error.code + " " + error.message);
                }
            });
        }
        $(function () {
            var Counter = AV.Object.extend("Counter");
            if ($('.leancloud_visitors').length == 1) {
                addCount(Counter);
            } else if ($('.post-title-link').length > 1) {
                showTime(Counter);
            }
        });
    </script>
    
</body>
</html>